<template>
  <div class="homepage">
      <p class="drop-down" v-if="dropDown">...</p>
     <div class="bscroll" ref="bscroll">
            <div class="bscroll-container">
    <div class="banner">
      <van-swipe >
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="titletype"> 
          <ul>
            <li>
              <router-link to="/contentList/protect">
    						<i class="iconfont">&#xe743;</i>
                护肤小知识
                </router-link>
            </li>
            <li>
    						<i class="iconfont">&#xe743;</i>
                彩妆教程
            </li>
            <li>
    						<i class="iconfont">&#xe743;</i>
                看她整
            </li>
            <li>
    						<i class="iconfont">&#xe743;</i>
                皮肤百科
            </li>
          </ul>
    </div>
    <div class="recommend">
        ————<span class="recommendTitile">精选推荐</span>————
    </div>
    <div class="main">
          <img src="../../../static/img_02.jpg"/>
          <dl class="maintext">
            <dt>
              <h3>美肌改造|美肌一米七美女为了脱单，都干了些什么？</h3>
            </dt>
            <dd>有好男人介绍吗？</dd>
            <dd>
              <span>美肌改造</span>
            </dd>
          </dl>
    </div>
    <div class="main">
          <img src="../../../static/img_02.jpg"/>
          <dl class="maintext">
            <dt>
              <h3>美肌改造|美肌一米七美女为了脱单，都干了些什么？</h3>
            </dt>
            <dd>有好男人介绍吗？</dd>
            <dd>
              <span>美肌改造</span>
            </dd>
          </dl>
       
    </div>
    </div>
    </div>
    <div class="backtop" @click="backTop" v-show="back">
        <i class="iconfont"> &#xe70b;</i>
         顶部
        </div>
  </div>
</template>

<script>
//引入插件
import BScroll from 'better-scroll'
export default {
  data() {
    return {
      images: ["https://img.yzcdn.cn/1.jpg", "https://img.yzcdn.cn/2.jpg"],
       dropDown:false,
       back:false
    };
  },
  mounted(){
        this.scrollFn()
  },
  methods:{
    //返回顶部
      backTop() {
          //  console.log( this.scroll)
         this.scroll.scrollTo(0,0,1000)
       },
       //上拉加载，下拉刷新
     scrollFn(){
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new BScroll(this.$refs.bscroll, {
                        click: true,
                        scrollY: true,
                        probeType: 3
                    });
                }else{
                    this.scroll.refresh();
                }
                this.scroll.on('scroll', (pos) => {
                  if(pos.y<-10){
                    this.back=true
                  }else{
                    this.back=false
                  }
                    console.log(pos.y,this.dropDown)
                    //如果下拉超过50px 就显示下拉刷新的文字
                    if(pos.y>50){
                        this.dropDown = true
                    }else{
                        this.dropDown = false
                    }
                })
                //touchEnd（手指离开以后触发） 通过这个方法来监听下拉刷新
                this.scroll.on('touchEnd', (pos) => {
                    // 下拉动作
                    if(pos.y > 50){
                        console.log("下拉刷新成功")
                        this.dropDown = false
                    }
                    //上拉加载 总高度>下拉的高度+10 触发加载更多
                    if(this.scroll.maxScrollY<this.scroll.maxScrollY+50){
                        console.log("加载更多")
                        //使用refresh 方法 来更新scroll  解决无法滚动的问题
                      this.scroll.refresh()

                    }
                    
                    console.log(this.scroll.maxScrollY+"总距离----下拉的距离"+pos.y)
                })
                console.log(this.scroll.maxScrollY)
            });
        }
  }
};
</script>

<style  lang="less" scoped>
.homepage{
  height: 100%;
}
.banner   {
		height: 5.57rem;
		width: 100%;
		overflow: hidden;	
		.van-swipe{
			height: 5.57rem;
			img{
				width: 100%;
				height: 5.57rem;
			}
		}
	
	
}
.titletype{
  a{
    color: #484848;
  }
   background: #fff;
   ul{
     display: flex;
     width:100%;
     flex-wrap: wrap;
     padding-left:.33rem;
     box-sizing: border-box;
     padding-top: .42rem;
   }
   li{
    //  flex: 1;
     width: 4.83rem;
     text-align: center;
     height: 1.43rem;
     line-height: 1.43rem;
     background: #f3f3f3;
     margin-bottom: .33rem;
     border-radius: .65rem;
     color: #484848;
     font-size: .36rem;
     i{
       display: inline-block;
       margin-right: .2rem
     }
   }
   li:nth-child(2n){
       margin-left: .5rem;
     }
}
.recommend{
   text-align: center;
   color: #eeeeee;
   background: #fff;
   .recommendTitile{
       background: linear-gradient(to right, red, orange);
        -webkit-background-clip: text;
        color: transparent;
        display: inline-block;
        margin: 0 .24rem;
   }
}
.main{
  background: #fff;
  img{
    width: 100%;
    margin-top: .45rem;
  }
  .maintext{
    width: 9.65rem;
    margin-left: .38rem;
    margin-bottom: .4rem;
    dt{
      font-size: .44rem;
      letter-spacing: .1rem;
      margin-top: .45rem;
    }
    dd{
      margin-top: .45rem;
      color: #bebebe;
      span{
        color: #474747;
        display: inline-block;
        padding: .15rem;
        border-radius: .06rem;
        background: #949dbc;
        margin-bottom: .24rem;
      }
    }
  }
}
.bscroll{
    width: 100%;
    height:100%;
    overflow: hidden;
}
.bscroll-container{
}
.drop-down{
    position: absolute;
    top:0px;
    lefT:0px;
    width: 100%;
    height: 50px;
    line-height:50px;
    text-align: center;
    font-size:0.8rem;
    color:#CCC;
}
.backtop{
  position: fixed;
  top: 80%;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  text-align: center;
  right: 0.32rem;
  background: #ffffff;
  color: #dfdfdf;
  padding-top: .38rem;
  box-sizing: border-box;
}
@font-face {
  font-family: 'iconfont';  /* project id 993598 */
  src: url('//at.alicdn.com/t/font_993598_j7wg2smrgsr.eot');
  src: url('//at.alicdn.com/t/font_993598_j7wg2smrgsr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_993598_j7wg2smrgsr.woff') format('woff'),
  url('//at.alicdn.com/t/font_993598_j7wg2smrgsr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_993598_j7wg2smrgsr.svg#iconfont') format('svg');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
    display: block
    }	
</style>